<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>pdf模拟测试</title>
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            display: flex;
        }
        .container {
            width: 50%; /* 左侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
        }
        .sidebar {
            width: 50%; /* 右侧占一半宽度 */
            padding: 20px;
            border: 1px solid #ccc;
            display: none;
        }

    </style>
</head>
<body>
<div class="container">
    <!-- 这里放你的原始内容 -->
    <div style="height: 80px">
        <h3>测试服务器ip： 223.70.139.221</h3>
        <h3>测试服务器端口： 8888;</h3>
        <hr>
    </div>
    <div class="layui-btn-container">
        <h3 style="color: red">``` 生成代理签章:</h3><br>

        <!-- HTML部分 -->
        <form id="pdfForm"  enctype="multipart/form-data">
            <h4>输入客户端签名json值<span style="color: red">（必填）</span></h4>
            <TEXTAREA type="text"  name="ClientSignaturJson" value=""  id="ClientSignaturJson" placeholder="" style="width: 300px;height: 200px" class="layui-input"></TEXTAREA>

            <input type="button"  value="提交" id="submitButton" onclick=" check()" class="layui-btn demo-class-accept">
            <input type="button"  value="下载签章文档" id="downloadButton" onclick=" download()" class="layui-btn demo-class-accept">

        </form>

        <div class="layui-btn-container">


        </div>
        <div style="height: 80px">
            <!-- ... -->
        </div>
    </div>
</div>

<!-- JavaScript部分 -->
<script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>


<script>


    // 生成随机字符串
    function generateRandomString(length) {
        const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let randomString = '';
        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            randomString += characters.charAt(randomIndex);
        }
        return randomString;
    }
    //计算客户端签名值json，对hsah摘要的
    // function  getpdf(){
    //     const jsonvalue=document.getElementById("hashdata").value;
    //     ESeaL_ClientSignByHash(jsonvalue,"111111",)
    // }
    function download(){

// 生成随机文件名
        const randomFileName = generateRandomString(24) + '.pdf';
        let that = this;
        this.loading = true;
        var xhr = new XMLHttpRequest(); // 用这种原生请求下载后端返回的二进制流打开就不会出现空白
        xhr.open(
            "get",
            "/downloadwordProxyClientSignature",
            true
        );
        xhr.responseType = "blob";
        xhr.onload = function() {
            that.loading = false;
            const url = window.URL.createObjectURL(this.response);
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", randomFileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        };
        xhr.send();




    }
    function check() {


         var ClientSignaturJson = document.getElementById("ClientSignaturJson").value

        if (ClientSignaturJson === ""  ) {
            alert("客户端签名json 数据未填写");
            return false;
        }
        var data = {
            ClientSignaturJson:ClientSignaturJson
        };
        $.ajax({
            url: "/ProxyClientSignature",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            processData: false,

            success: function(response) {

                if(response.code==200){
                    layer.open({
                        title: '提示',
                        content: "代理签章成功",
                    });
                }
                else {
                    layer.open({
                        title: '提示',
                        content:response.msg ,
                    });
                }


            },
            error: function(xhr, status, error) {
                // Handle error response from the server
                alert("服务端错误: " + error);
            }
        });
    }








</script>


</body>
</html>